<!DOCTYPE html>
<html>
<head>
    <title>{$name} {$seo_title} {$site_name}</title>
    <meta name="keywords" content="{$seo_keywords}" />
    <meta name="description" content="{$seo_description}">
    <tc_include file="Public:head" />
    <link href="/themes/simplebootx/Public/assets/css/reset.css" rel="stylesheet"/>
    <link href="/themes/simplebootx/Public/assets/css/sl_style.css?v={$SOURCE_VERSION}" rel="stylesheet"/>
    <script src="__PUBLIC__/js/vue.js"></script>
    <style>
        .show-question-but {
            color:#000232;
            font-size: 18px;
            margin-left: 144px;
            position: absolute;
            right: 15px;
            bottom: -20px;
            cursor: pointer;
        }
        #article_content {
            word-wrap: break-word;
            display: inline-block;
            height: 100px;
            overflow: hidden;
        }

        .none {
            display: none;
        }

        .pointer {
            cursor: pointer;
        }
        
        .relative {
            position: relative;
        }

        .main-comment-name {
            display: inline-block;
            padding:5px;
            float: left;
            width: 180px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .reply-but, .comment-but {
            display: none;
            color: #000232;
            font-size: 10px;
            border: 1px solid #000232;
            border-radius: 20px;
            margin-left: 5px;
            padding: 5px;
            position: absolute;
            margin-top: -5px;
        }
        .fa-comment-o:hover .reply-but {
             display: inline-block;
         }

        .fa-comment-o:hover .comment-but {
            display: inline-block;
        }

        .ellipsis3 {overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;}

        .short_answer {
            max-height: 60px;
            color: #333333;
            font-size: 16px;
            padding-top: 8px;

        }
        .short_answer_boder_top {
            border-top: 1px solid #a9a9a9;
        }
        .qst_content h2 {
            padding: 0 10px;
            font-size: 24px;
        }
        /*侧边栏*/

        .rightarea h3 {
            font-size: 16px;
            color: #000232;
            font-weight: bold;
            letter-spacing: 2px;
            margin: 50px 0 26px;
        }
        /*行家样式*/
        .answers_expert{
            margin-top: 46px;
            position: relative;
            border: 1px solid #f4f4f4;
            padding: 0 16px 8px;
            box-shadow: 3px 3px 6px 0px
            rgba(0, 0, 0, 0.16);
        }
        .answers_expert .picture_ground {
            width: 60px;
            height: 60px;
            position: absolute;
            top: -30px;
            /*margin-left: 18px;*/

        }
        .answers_expert .picture_ground img {
            width: 100%;
            height: 100%;
            border-radius: 50px;
        }
        .answers_expert .names {
            font-size: 18px;
            font-weight: bolder;
            margin-left: 72px;
            margin-top: -25px;
        }
        .answers_expert .names .name {
            color: #000232;
            line-height: 22px;
            margin-bottom: 4px;
        }
        .answers_expert .names .name2 {
            color: #000232;
            font-size: 14px;
            line-height: 18px;

        }
        .answers_expert .text {
            font-size: 14px;
            color: #707070;
            line-height: 18px;
            margin-top: 18px;
        }
        /*行家样式结束*/
        .write_answer {
            float: right;
            margin-top:6px;
            margin-right: 6px;
            font-size: 24px;
            color: #c8161d;
            font-weight: bolder;
            letter-spacing: 2px;

        }
        /*热门问题样式*/
        .problem_item {
            font-size: 18px;
            font-weight: bolder;
            line-height: 24px;
            padding-bottom: 14px;
            border-bottom: 1px solid #a9a9a9;
            color: #000232;
            margin-top: 20px;
        }
        .problem_item:last-child {
            border: none;
        }
        .a-notice {
            height: 214px;
            margin-top: 50px;
        }
        .a-notice img {
            width: 100%;
            height: 100%;
        }
    </style>


    <!-- 弹窗css-->
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .payment {
            width: 1054px;
            height: 660px;
            background-image:url("./public/images/img/btm_bg.png"), url("./public/images/img/payment.png") ;
            background-repeat: no-repeat;
            background-position: -90px  276px ,center;
            /*border: 1px solid #a9a9a9;*/
            position: relative;
            display: none;

        }
        .payment ul{
            width: 308px;
            height: 156px;
            margin: 0 auto;
            padding-top: 30px;
            /*position: absolute;*/
            /*margin: auto;*/
            /*top: 0;*/
            /*left: 0;*/
            /*right: 0;*/
            /*bottom: 0;*/
        }
        .payment li {
            width: 306px;
            height: 80px;
            background-color: #fff!important;
            color: #000232;
            -webkit-border-radius: 14px;
            -moz-border-radius: 14px;
            border-radius: 14px;
            margin-bottom: 24px;
            color: #000232;
            /*line-height: 64px;*/
            /*text-align: center;*/
            box-sizing: border-box;
            padding-left: 120px;
            padding-top: 15px;
        }
        .payment li span {
            font-size: 24px;
            font-weight: bolder;
            line-height: 30px;
        }
        .payment li i {
            font-size: 14px;
            line-height: 24px;
        }
        .payment .money {
            background:url("./public/images/img/money.png") 54px center no-repeat ;
            -webkit-background-size: 56px 36px;
            background-size: 56px 36px;
        }
        .payment .ziyuan {
            background:url("./public/images/img/ziyuan.png") 54px center no-repeat ;
            -webkit-background-size: 47px 47x;
            background-size: 47px 47px;
        }
        .payment .know {
            background:url("./public/images/img/know.png") 54px center no-repeat ;
            -webkit-background-size: 51px 49x;
            background-size: 51px 49px;
        }
        .payment .title {
            width: 460px;
            height: 54px;
            margin: 0 auto 0;
            color: #fff;
            font-size: 18px;
            line-height: 22px;
            letter-spacing: 1px;
            padding-top: 106px;
        }
        .payment .close{
            position: absolute;
            top: 15px;
            right: 15px;
            background: url("./public/images/img/close_w.png") no-repeat center;
            width: 30px;
            height: 30px;
            opacity: 5;
        }
        .icon_collect {
            background: url("./public/images/img/icon_collect.png") no-repeat;
            width: 22px;
            height: 22px;
            margin-left: 40px;
        }
        #article_content {
            font-size: 16px;
        }
        .proptom_main_item {
            padding-bottom: 28px;
            border-bottom: 1px solid #707070;
        }
        .short_answer {
            padding-bottom: 0!important;
            max-height: 80px!important;
        }
    </style>
</head>
<body>

    <tc_include file="Public:nav" />
    <div class="container tc-main" style="width:1198px;">
        <div class="qst_content comwidth clearfix" style="margin-top: 90px;width: 1198px;">
            <div class="leftarea">
                <h2 class="ellipsis2" >{$info.post_title}</h2>
                <!--问题内容-->
                <if condition="!empty($info['short_content'])">
                    <div class="proptom_top" style="position: relative;">

                        <div id="article_content">
                            {$info.short_content}
                        </div>
                        <span id="openItem" class="content_btn show-question-but">展 开</span>
                    </div>
                </if>

                <!--写回答-->
                <div class="answer">
                    <p class="tit">
                        回答
                        <!--（<span>点击头像显示回答</span>）:-->
                    </p>
                </div>

                <!--回答列表-->
                <div id="proptom_main">
                    <div v-for="answer in answer_list" class="proptom_main_item">

                        <!--缩略列表部分-->
                        <div class="proptom_btm" id="{$vo.id}">
                            <div class="tit_sub">
                                <!--<img :src="answer.avatar" alt="用户头像">-->
                                <img :src="answer.avatar" alt="">
                                <div class="proptom_top">
                                    <p class="name">
                                        <span>{{ answer.post_author_name }}</span>
                                        <span style="font-size: 16px;">{{ answer.position }}</span>
                                        <i>{{ answer.post_date }}</i>
                                    </p>
                                    <p class="name ellipsis3 short_answer" :class="{short_answer_boder_top : check_short_answer(answer.post_excerpt)}">
                                        {{ answer.post_excerpt }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!--评论列表-->
                        <div class="proptom_content none">

                            <!--回答内容-->
                            <div class="article_content" v-html="answer.post_content"></div>

                            <!--评论-->
                            <div class="proptom_content_btm ">

                                <p class="proptom_tit">
                                    <a href="javascript:;"><span>评论(<i>{{ answer.comment_count }}</i>)</span></a>
                                    <span class="fa fa-comment-o comment-icon" style="margin-left: 15px;"><span class="comment-but">点击评论</span></span>
                                </p>

                                <!--评论列表-->
                                <div class="say_proptom1" v-for="comment in answer.comments">

                                    <!--评论人-->
                                    <div class="proptom_tit_name clearfix relative" style="margin-top: 10px;">

                                        <!--主评论人-->
                                        <span  class="main-comment-name">{{ comment.full_name }}<br>
                                            <i style="color: #333; font-size: 12px;float: left;padding-right: 5px;">{{ comment.createtime }}</i>
                                        </span>

                                        <!--回复列表-->
                                        <div style="color: #333;font-size: 16px;margin-top: 5px;padding-left: 5px; float:left;border-left:1px solid #c5c5c5;width: 600px;">

                                            <!--主评论的内容-->
                                            <p class="reply1" style="padding-left: 10px;width: 590px;">
                                                {{ comment.content }}
                                                <i class="fa fa-comment-o replay-icon" :data-comment-id="comment.id" :data-full-name="comment.full_name" :data-uid="comment.uid" style="margin-left: 15px;">
                                                    <span class="reply-but">点击回复</span>
                                                </i>
                                            </p>

                                            <!--回复内容-->
                                            <ul class="say_proptom2" v-for="child_comment in comment.children">

                                                <li>
                                                    <div class="proptom_tit_name clearfix" style="margin-top: 28px;">
                                                        <span style="display: inline-block;padding:0 5px 5px;margin-top: 5px; float: left;">
                                                            {{ child_comment.full_name }}<br>
                                                            <i style="color: #333; font-size: 12px;float: left;padding-right: 5px;">{{ child_comment.createtime }}</i>
                                                        </span>
                                                        <div style="color: #333;font-size: 16px;margin-top: 5px;padding-left: 5px; float:left;border-left:1px solid #c5c5c5;margin-left: -1px;">
                                                            <p style="padding-left: 10px;">{{ child_comment.content }}</p>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--反馈区-->
                            <div class="content_btm_btm clearfix">
                                <p class="proptom_tit fl">
                                    <a href="avascript:;" style="margin-right: 18px;" :data-answer-id="answer.id" class="like-answer">
                                        <span class="agree">赞同 (<i>{{ answer.post_like }}</i>)</span>
                                    </a>
                                </p>
                                <p class="proptom_tit fl" style="margin-right: 40px;">
                                    <a href="javascript:;" :data-answer-id="answer.id" class="dislike-answer">
                                        <span class="no_agree">反对 (<i>{{ answer.dislike }}</i>)</span>
                                    </a>
                                </p>

                                <!-- <i>评论：</i> -->
                                <p class="fl comment_btm" style="width: 530px;cursor: pointer;">
                                    <input type="text" placeholder="评论：" class="inputval" style="font-size: 16px;border:none;width: 410px;">
                                    <span class="fr shift submit_comment" :data-answer-id="answer.id" :data-comment-id="0" :data-uid="0">发送</span>
                                </p>

                                <!--收藏-->
                                <a :id="answer.id" class="icon_collect fl collect-btn" data-href="{:U('user/favorite/do_favorite', ['id' => $info['id'], 'from_id' => $info['post_author']])}"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rightarea">
                <div>
                    <a class="write_answer" href="{:leuu('Question/Question/add_answer', ['question_id' => $info['id']])}"><i>写回答</i></a>
                    <h3 style="margin-top:0;">提问人</h3>
                </div>
               <div class="answers_expert">
                   <a href="{:U('User/Index/professor_homepage', ['professor_id' => $question_author['id']])}">
                       <div class="picture_ground">
                           <img src="{$question_author.avatar}" alt="">
                       </div>
                       <div class="names">
                           <p class="name">{$question_author.user_nicename}</p>
                           <p class="name2"><span>{$question_author.company}</span><span>{$question_author.position}</span></p>
                       </div>
                       <p class="text">{$question_author.signature}</p>
                   </a>
               </div>

                <php>
                    $hot_question = get_hot_post(3, 0, 5);
                </php>
                <if condition="!empty($hot_question)">
                    <h3>热门问题</h3>
                    <div class="hot_problem">
                        <volist name="hot_question" id="vo">
                            <a href="{:U('Question/Question/question_info', ['id' => $vo['id']])}">
                                <div class="problem_item">
                                    {$vo.post_title}
                                </div>
                            </a>
                        </volist>
                    </div>
                </if>

                <!--广告位-->
                <php>
                    $hot_artivity = get_activitys(1);
                </php>
                <if condition="!empty($hot_artivity)">
                    <volist name="hot_artivity" id="vo">
                        <div class="a-notice">
                            <a href="{$vo.link_addr}">
                                <img src="{:sp_get_asset_upload_path($vo['thumb'])}" alt="">
                            </a>
                        </div>
                    </volist>
                </if>

            </div>
        </div>
    </div>
    <!--问答支付弹窗-->
    <div class="payment" id="payment">
        <!--<span class="close"></span>-->
        <p class="title">同时保有全然相反的两种观念，还能正常行事，是第一流智慧的标志。</p>
        <ul>
            <a data-href="{:U('Question/Question/pay_for_question', ['question_id' => $info[id]])}" class="pay_for_answer">
                <li class="money"><span>资金</span> <br><i>付费查看，需要({$info.question_price})元</i></li>
            </a>
            <!--功能没有开放-->
            <a href="JavaScript:;" style="display: none;">
                <li class="ziyuan"><span>资源</span> <br><i>朋友支持，需要(7)位</i></li>
            </a>
            <a href="{:leuu('Question/Question/add_answer', ['question_id' => $info['id']])}">
                <li class="know"><span>知识</span> <br><i>回答问题，需审核</i></li>
            </a>
        </ul>
    </div>
    <!--问答支付弹窗二维码-->
    <div style="display: none" id="pay_qrcode" data-question-id="{$info.id}">
        <img data-src="{:U('Question/Question/pay_for_question', ['question_id' => $info[id]])}">
    </div>

    <!-- JavaScript -->
    <tc_include file="Public:scripts" />
    <script src="__PUBLIC__/js/layer/layer_1.js"></script>
    <script type="text/javascript">
        // 问题展开效果
        var real_question   = '{$info.post_content}';
        var short_question  = '{$info.short_content}';
        $('.show-question-but').toggle(
            function () {
                $('#article_content').empty();
                $('#article_content').css('overflow', 'inherit');
                $('#article_content').html(real_question);
                $('.show-question-but').html('收起');
            }, function () {
                $('#article_content').empty();
                $('#article_content').css('overflow', 'hidden');
                $('#article_content').html(short_question);
                $('.show-question-but').html('展开');
            }
        );

        $(document).ready(function(){

            $('body').delegate('.pay_for_answer', 'click', function () {
                var question_id = $('#pay_qrcode').attr('data-question-id');
                var src = $('#pay_qrcode img').attr('data-src');

                $.get(src, {}, function (re) {
                    if (typeof(re) != 'string') {
                        layer.msg(re.info);
                        return;
                    } else {
                        $('#pay_qrcode img').attr('src', src);
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            area: '270px',
                            offset: ['250px'],
                            btn: ['完成', '取消'],
                            // skin: 'layui-layer-nobg', //没有背景色
                            shadeClose: true,
                            content: $('#pay_qrcode'),
                            yes: function (index) {
                                $.get("{:U('Question/Question/query_question_pay_order')}", {question_id : question_id}, function (re) {
                                    if (re.status) {
                                        layer.load();
                                        setTimeout(function () {
                                            window.location.reload();
                                        }, 1000);
                                    } else {
                                        layer.msg(re.info);
                                    }
                                });
                            },
                            cancel:function () {
                                $("#payment ul").css({
                                    display:"block"
                                })
                            }
                        })
                    }
                });
            });

            $('body').delegate('.like-answer', 'click', function () {
                var answer_id = $(this).attr('data-answer-id');
                var _this = this;
                $.get("{:U('Question/Question/like_answer')}", {answer_id : answer_id}, function (data) {

                    if (data.status) {
                        $(_this).find('i').html(data.data.like_count);
                    }
                })
            });

            $('body').delegate('.dislike-answer', 'click', function () {
                var answer_id = $(this).attr('data-answer-id');
                var _this = this;
                $.get("{:U('Question/Question/dislike_answer')}", {answer_id : answer_id}, function (data) {

                    if (data.status) {
                        $(_this).find('i').html(data.data.dislike_count);
                    }
                })
            });

            // 点击评论按钮，则评论该回答
            $('body').delegate('.comment-icon', 'click', function () {
                var input_comment   = $(this).parents('.proptom_content_btm').siblings('.content_btm_btm').find('.inputval');
                var submit_comment  = $(this).parents('.proptom_content_btm').siblings('.content_btm_btm').find('.submit_comment');
                $(submit_comment).attr('data-comment-id', 0);  // 回复id
                $(submit_comment).attr('data-uid', 0);          // 被回复人id
                $(input_comment).attr('placeholder', "评论 : ").val("");
            });

            // 点击回复按钮，则回复该评论
            $('body').delegate('.replay-icon', 'click', function () {
                var input_comment   = $(this).parents('.proptom_content_btm').siblings('.content_btm_btm').find('.inputval');
                var submit_comment  = $(this).parents('.proptom_content_btm').siblings('.content_btm_btm').find('.submit_comment');
                $(submit_comment).attr('data-comment-id', $(this).attr('data-comment-id'));   // 回复id
                $(submit_comment).attr('data-uid', $(this).attr('data-uid'));                   // 被回复人id
                $(input_comment).attr('placeholder', "回复 " + $(this).attr('data-full-name') + " : ").val("");
            });

            // 发送评论
            $('body').delegate('.submit_comment', 'click', function () {
                var parent_id   = $(this).attr('data-comment-id');
                var answer_id   = $(this).attr('data-answer-id');
                var comment     = $(this).siblings('.inputval').val();
                var to_uid      = $(this).attr('data-uid');

                // console.log(parent_id, answer_id, comment, to_uid);

                $.post("{:U('Question/Question/add_comment')}", {parent_id : parent_id, answer_id : answer_id, comment : comment, to_uid : to_uid}, function (data) {

                    // console.log(data);
                    if (data.status) {

                        // 新对象
                        var new_comment_id          = data.data.id;
                        var new_item                = new Object();
                        new_item[new_comment_id]    = data.data;

                        // 添加数据
                        if (parent_id == 0) {
                            new_item[new_comment_id]['children'] = new Array();
                            var comments = vm.answer_list[answer_id]['comments'];
                            vm.answer_list[answer_id]['comments'] = Object.assign(new_item, comments);
                        } else {
                            var replys = vm.answer_list[answer_id]['comments'][parent_id]['children'];
                            vm.answer_list[answer_id]['comments'][parent_id]['children'] = Object.assign(new_item, replys);
                        }

                        // 情况输入框
                        $('.inputval').val('');
                    }
                })
            });

;
            // 新添加删除按钮功能，
            $(".close").click(function () {
                $(this).parents("#payment").css("display","none");
            });
            // 回答展开效果
            var can_read_answer = "{$can_read_answer}";
            $('body').delegate('.proptom_btm', 'click', function () {

                if (can_read_answer == 0) {
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 1,
                        area: '1056px',
                        skin: 'layui-layer-nobg', //没有背景色
                        shadeClose: true,
                        content: $('#payment')
                    });
                    return;
                }

                open = true;
                if ($(this).siblings('.proptom_content').hasClass('none')) {
                    open = false;
                }
                if (!open) {
                    // 展开回答详情
                    $(this).siblings('.proptom_content').removeClass('none');
                } else {
                    $(this).siblings('.proptom_content').addClass('none');
                }
            });

            // 后台传的数据
            var answer_list = <?php echo json_encode($answers_list);?>;
            var vm = new Vue({
                el      : "#proptom_main",
                data    : {
                    answer_list : answer_list
                },
                methods : {
                    check_short_answer : function (e) {
                        return !(e == null || e == '');
                    }
                }
            });
        });

    </script>

    <script>
        $(".money").click(function () {
            $('#payment ul').css("display","none")
        });

        $("body").on("click"," .layui-layer-btn1,.layui-layer-btn0, #layui-layer-shade2",function () {
            $('#payment ul').css("display", "block")
        });
    </script>

    <!--微信分享-->
    <script src="__PUBLIC__/js/wx/jweixin-1.4.0.js"></script>
    <script type="text/javascript">
        wx.config({
            debug: false,
            appId: '{$signPackage.appId}',
            timestamp: '{$signPackage.timestamp}',
            nonceStr: '{$signPackage.nonceStr}',
            signature: '{$signPackage.signature}',
            jsApiList: [
                // 所有要调用的 API 都要加到这个列表中
                'checkJsApi',
                'onMenuShareAppMessage',
                'onMenuShareTimeline'
            ]
        });

        //完成wx.config，执行这里
        wx.ready(function () {

            wx.checkJsApi({
                jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            });

            var data = {
                title: "日新网 - 问答",
                desc: '{$info.post_title}',
                link: window.location.href,
                imgUrl: 'http://' + "{$DOMAIN_NAME}" + '/themes/simplebootx/Public/assets/images/logo.png',
            }

            //分享给朋友
            wx.onMenuShareAppMessage(data);
            //分享到朋友圈
            wx.onMenuShareTimeline(data);
        });
    </script>
    <script>
        $(function () {
            $(".short_answer").each(function (index,value) {
                var text = $(value).text().trim().length;
                if(!text){
                    $(value).siblings(".name").css("margin-top","24px");
                }
            })
        })
    </script>
    <script>
        $(function () {
            $(".short_answer").each(function() {
                var str = $(this).text().trim();
                if (str.length < 1){
                    $(this).siblings(".name").css({"margin-top":"24px"})
                } else {
                    return;
                }
            })
        })
    </script>
</body>
</html>